<template>
  <div class="pagination-container">
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :page-size="pageSize"
      :page-sizes="pageSizes"
      :current-page="currentPage"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      prev-text="上一页"
      next-text="下一页"
      :pager-count="5"
    />
  </div>
</template>

<script setup>
/**
 * 通用分页组件
 * @props total - 总记录数
 * @props pageSize - 每页显示条数
 * @props currentPage - 当前页码
 * @props pageSizes - 页面大小选项
 * @emits update:currentPage - 当前页码改变事件
 * @emits update:pageSize - 每页显示条数改变事件
 */

const props = defineProps({
  total: {
    type: Number,
    required: true
  },
  pageSize: {
    type: Number,
    default: 15
  },
  currentPage: {
    type: Number,
    default: 1
  },
  pageSizes: {
    type: Array,
    default: () => [10, 15, 20, 50]
  }
})

const emit = defineEmits(['update:currentPage', 'update:pageSize'])

// 页码改变事件
const handleCurrentChange = (val) => {
  emit('update:currentPage', val)
}

// 每页条数改变事件
const handleSizeChange = (val) => {
  emit('update:pageSize', val)
  emit('update:currentPage', 1)
}
</script>

<style scoped>
.pagination-container {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 15px 0;
  background-color: white;
  z-index: 10;
}
</style> 